<template>
  <div class="table">
    <div class="mt-10 mb-10">
      <search-form
        v-model="formOption.data"
        :formOption="formOption"
        :showBtn="true"
        :btn-list="btnList"
        label-width="90px"
      />
    </div>
    <PageTable :loading="loading" :columns="columns" :data="dataSource" />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { ADMIN_MANAGER_STATUS } from '@/enum/setting'
import { mapState } from 'vuex'
export default {
  name: 'PlatformTable',
  props: {
    type: {
      type: String,
      default: 'platform'
    }
  },
  data() {
    return {
      loading: true,
      formOption: {
        data: {
          roleId: ''
        },
        items: [
          {
            type: 'input',
            label: '姓名/手机',
            value: 'accountInfo',
            style: {
              width: '230px'
            }
          },
          {
            type: 'select',
            label: '账号状态',
            value: 'status',
            selectList: ADMIN_MANAGER_STATUS
          },
          {
            type: 'select',
            label: '所属角色',
            value: 'roleId',
            selectList: []
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getList()
          }
        }
      ],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '头像',
          render: (h, { row }) => {
            return (
              <el-image
                src={row.avatar}
                preview-src-list={[row.avatar]}
                style={'width: 80px;height: 80px;'}
              />
            )
          }
        },
        {
          label: '账号',
          prop: 'userName'
        },
        {
          label: '姓名',
          prop: 'realName'
        },
        {
          label: '联系电话',
          prop: 'telephone'
        },
        {
          label: '所属角色',
          prop: 'roleName'
        },
        {
          label: '是否启用',
          render: (h, { row }) => {
            return <span>{row.status === 1 ? '已启用' : '冻结'}</span>
          }
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {row.status ? (
                  <span>
                    <el-button
                      type="text"
                      onClick={() => this.updateStatus({ state: 0, id: row.id })}
                    >
                      冻结
                    </el-button>
                  </span>
                ) : (
                  <span>
                    <el-button
                      type="text"
                      onClick={() => this.updateStatus({ state: 1, id: row.id })}
                    >
                      解冻
                    </el-button>
                    <el-button type="text" onClick={() => this.delete(row.id)}>
                      删除
                    </el-button>
                  </span>
                )}
                <el-button type="text" class={'ml-10'} onClick={() => this.update(row.id)}>
                  编辑
                </el-button>
              </div>
            )
          }
        }
      ],
      dataSource: []
    }
  },
  computed: {
    ...mapState('base', ['roleSelectList']),
    ADMIN_MANAGER_STATUS() {
      return ADMIN_MANAGER_STATUS
    }
  },
  watch: {
    roleSelectList: {
      handler(val) {
        this.formOption.items.forEach(item => {
          if (item.value === 'roleId') {
            item.selectList = val.map(val => {
              return {
                label: val.roleName,
                value: val.id
              }
            })
            item.selectList.unshift({ label: '全部', value: '' })
          }
          return item
        })
      },
      deep: true
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    getPrams() {
      const params = {
        ...this.listQuery
      }
      const { accountInfo, status, roleId } = this.formOption.data
      if (accountInfo) params.accountInfo = accountInfo
      if (status || status === 0) params.status = status
      if (roleId) params.roleId = roleId
      return params
    },
    async getList() {
      const params = this.getPrams()
      const {
        data: { records, total }
      } = await this.$http.system.admin.getList({ params })
      this.dataSource = records
      this.total = total
      this.loading = false
    },
    // 更新启用状态
    async updateStatus({ state, id }) {
      const { status, msg } = await this.$http.system.admin.updateFrozen({ status: state, id })
      if (status === 200) {
        this.$message.success(state ? '已解冻' : '已冻结')
        this.getList()
      } else {
        this.$message.error(msg)
      }
    },
    // 删除
    async delete(id) {
      this.$handleConfirm({ message: '确认删除吗？' }).then(async () => {
        const { status, msg } = await this.$http.system.admin.delete(id)
        if (status === 200) {
          this.$message.success('已删除！')
          if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
            this.listQuery.pageNo--
          }
          this.getList()
        } else {
          this.$message.error(msg)
        }
      })
    },
    // 编辑
    update(id) {
      this.$router.push({ path: '/setting/system_admin/edit_admin', query: { id, type: 'update' } })
    }
  }
}
</script>

<style lang="scss" scoped></style>
